<template>
<div class="home-view">
    <div class="two item">
        <ColorItem 
            v-for="item in data.colorList" 
            :key="item.id"
            :itemData="item">
        </ColorItem>
    </div>
    <div class="three item">
        <GradientItem 
            v-for="item in data.gradientList" 
            :key="item.id"
            :itemData="item">
        </GradientItem>
    </div>
    <div class="four item">
        <ShadowItem 
            v-for="item in data.shadowList" 
            :key="item.id"
            :itemData="item">
        </ShadowItem>
    </div>
    <Loading
        :state="loading">
    </Loading>
</div>
</template>

<script>
import ColorItem from '@/components/color/ColorItem';
import GradientItem from '@/components/gradient/GradientItem';
import ShadowItem from '@/components/shadow/ShadowItem';
import Loading from '@/components/other/Loading';
export default {
    name: 'Home',
    components: {
        ColorItem,
        GradientItem,
        ShadowItem,
        Loading,
    },
    data(){
        return{
            loading:false, //加载状态
            data:{
                colorList:[],
                gradientList:[],
                shadowList:[],
            },
        };
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            this.loading = true;
            this.$Api.getIndex().then((data)=>{
                this.data = data;
            }).catch(({msg}) =>{
                this.$message.error(msg);
            }).finally(()=>{
                this.loading = false;
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.home-view{
    width: var(--container-width);
    margin: 0 auto;
    padding-top: 35px;
    display: grid;
    grid-gap: 35px;
    grid-template-rows: min-content 1fr;
    grid-template-areas: "two" "three" "four";
    grid-template-columns: 1fr;
    grid-auto-flow:row dense;
    font-size: 1.5rem;
    .two{
        height:fit-content;
        grid-area: two;
        position: relative;
    }
    .three{
        height:fit-content;
        grid-area: three;
        position: relative;
    }
    .four{
        height:fit-content;
        grid-area: four;
        position: relative;
    }
    >.item{
        display: grid;
        grid-gap:35px;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
</style>

